<template>
  <div class="container collects">
    <van-tabs :active="active" @change="onChange">
      <van-tab title="商品">
        <div class="collects-list">
          <ant-product v-for="(item,index)  in collectsList.goodsCollects" :key="index" :isCollection="true" :data="item"></ant-product>


        </div>
      </van-tab>
      <van-tab title="店铺">
        <div class="collects-list">
          <ant-store v-for="(item,index)  in collectsList.SToreCollects" :key="index" :data="item"></ant-store>
        </div>
      </van-tab>
    </van-tabs>
    <i-load-more v-if="!collectsList" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="collectsList" :tip="'没有更多数据了'" :loading="loading" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import AntStore from "@/components/store";
  import AntProduct from '@/components/product'
  import request from "@/api/request";
  import {
    getCollects,
    cancelCollect
  } from '@/utils/index'
  export default {
    components: {
      AntStore,
      AntProduct
    },
    data() {
      return {
        active: 0,
        loading: false,
      };
    },
    computed: {
      ...mapState(["collectsList"])
    },
    methods: {
      ...mapMutations(["setCollectsList"]),
      onChange(e) {
        console.log(e.mp.detail.index)
        this.active = e.mp.detail.index
        // this.active = val
      },
    },
    mounted() {
      this.cancelCollect = cancelCollect
      this.getCollects = getCollects
      this.getCollects();
    }
  };

</script>

<style lang="less">
  .collects {
    background: #fff;
  }

  .collects-list {
    padding-top: 10px;
  }

  .product-list {
    font-size: 0;

    .product {
      margin-bottom: 40/2px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .scroll-view-x {
    overflow-x: auto;
  }

</style>
